<!-- 自定义步进器 - 数字累加 -->
<template>
  <view class="step">
    <view class="step-label d-flex">
      <text class="siyuan-medium">选择数量</text>
      <view class="step-option d-flex">
        <van-icon
          name="arrow-down"
          class="van-icon-arrow"
          :color="count < 2 ? '#A4A4A4' : '#000000'"
          size="20px"
          @click="stapClick('reduce')"
        />
        <text class="intel-one-mono-medium">{{ count }}</text>
        <van-icon
          name="arrow-up"
          class="van-icon-arrow"
          color="#000000"
          size="20px"
          @click="stapClick('add')"
        />
      </view>
    </view>
    <label for="tip" class="siyuan-medium">每个账号最多购买<text class="intel-one-mono-regular">10</text>张</label>
  </view>
</template>

<script setup>
import { ref } from "vue";
let emit = defineEmits(["update:count"]);
let count = ref(1);

// option stepper
let stapClick = status => {
  switch (status) {
    case "reduce":
      count.value < 2
        ? uni.showToast({
            title: "数量不能少于一张",
            icon: "none",
          })
        : (count.value = count.value - 1);
      emit("update:count", count.value);
      break;
    case "add":
      if (count.value >= 10) {
        uni.showToast({
          title: "每个账号限购10张",
          icon: "none",
        });
      } else {
        count.value = count.value + 1;
        emit("update:count", count.value);
      }

      break;
  }
};
</script>

<style lang="scss" scoped>
.step {
  padding: 20rpx 46rpx 0;
  font-size: 26rpx;
  label[for="tip"] {
    margin-top: 18rpx;
    color: var(--grey-text);
	text {
		color: var(--grey-text);
	}
  }
  .step-label {
    align-items: center;
    font-size: inherit;
    .step-option {
      align-items: center;
      justify-content: flex-end;
      flex: 1;
      text {
        min-width: 60rpx;
        display: inline-block;
        text-align: center;
        font-size: 40rpx;
      }
    }
  }
}
</style>
